<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>回复查询页面</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.10.0/font/bootstrap-icons.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* 按钮形状 */
        .operation_btn {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: center;
        }

        #operation_btns> :first-child {
            background-color: #e8f5ee;
            color: #3dbc7d;
            border: solid 1px #3dbc7d;
        }

        #operation_btns> :first-child:hover {
            background-color: rgb(207, 239, 219);
            cursor: pointer;
        }

        #operation_btns> :first-child:active {
            background-color: rgb(148, 215, 169);
        }

        #operation_btns> :nth-child(2) {
            background-color: #fef8ec;
            color: #f6d69f;
            border: solid 1px #f6d69f;
        }

        #operation_btns> :nth-child(2):hover {
            background-color: rgb(248, 231, 215);
            cursor: pointer;
        }

        #operation_btns> :nth-child(2):active {
            background-color: rgb(220, 174, 132);
        }

        #operation_btns> :nth-child(3) {
            background-color: #fff4f2;
            color: #ebb7b7;
            border: solid 1px #ebb7b7;
        }

        #operation_btns> :nth-child(3):hover {
            background-color: rgb(255, 226, 226);
            cursor: pointer;
        }

        #operation_btns> :nth-child(3):active {
            background-color: rgb(227, 159, 159);
        }
    </style>
    <style>
        #length_options>* {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #length_options>*.selected {
            background-color: #ccc;
        }

        #adopt_options>* {
            padding: 5px;
            margin-bottom: 5px;
            border: 1px solid #ccc;
            cursor: pointer;
        }

        #adopt_options>*.selected {
            background-color: #ccc;
        }
    </style>
    <style>
        #attitude_options .radioOption {
            border: solid 1px #c3c3c3;
            text-align: center;
            color: #c3c3c3;
            border-radius: 8px;
            width: 20%;
        }
    </style>
    <style>
        * {
            user-select: none;
        }
    </style>
</head>

<body style="padding: 0; margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column">
    <div style="margin: 10px auto 10px 2%; font-size: 20px">
        <i class="bi bi-list"></i>
        <span>评论回复</span>
    </div>
    <div id="root"
        style="display: flex; flex: 1; justify-content: space-evenly; align-items: center; width: 100%; height: 95%">
        <div id="left_block" style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
            <!--标题栏-->
            <div id="left_title"
                style="display: flex; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
                <div style="margin: 10px auto 10px 10px">主题分析</div>
            </div>
            <!--表单-->
            <form id="form1" style="width: 100%; flex-grow: 1; display: flex; flex-direction: column" method="POST"
                action="http://139.180.201.79:5000/analyse">
                <!--搜索框-->
                <div class="input-group mb-3" style="width: 95%; margin: 20px auto 10px auto;">
                    <button class="btn btn-light" type="button" id="button-addon1" style="border: solid 1px #a3a3a3" onclick="query_tweet()">
                        <i class="bi bi-search" style="margin: auto 5px auto 10px"></i>
                    </button>
                    <input id="query-text" type="text" class="form-control" placeholder="try typing 'new'">
                </div>
                <!--推文输入-->
                <div style="user-select: none; margin: 10px auto 10px 3%">推文输入:</div>
                <textarea id="tweet" style="width: 95%; flex: 1; margin: 10px auto 10px auto;" class="form-control"
                    aria-label="With textarea"></textarea>
                <!--评论输入-->
                <div style="user-select: none; margin: 10px auto 10px 3%">评论输入:</div>
                <textarea id="comment" style="width: 95%; flex: 1;margin: 10px auto 10px auto;" class="form-control"
                    aria-label="With textarea"></textarea>
                <!--若干选择-->
                <div id="options" style="width: 92%; height: 20%; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
                        margin: 0 auto;">
                    <!--国家选择-->
                    <div style="display: flex; width: 100%; font-size: 15px;">
                        <div
                            style="width: 10%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            国家选择:
                        </div>
                        <select id="country-select" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option selected>Open this select menu</option>
                            <option value="America">America</option>
                            <option value="Britain">Britain</option>
                            <option value="China">China</option>
                            <option value="France">France</option>
                            <option value="Germany">Germany</option>
                            <option value="Japan">Japan</option>
                        </select>
                    </div>
                    <!--两个选择-->
                    <div style="width: 100%; display: flex; justify-content: space-evenly">
                        <!--平台选择-->
                        <div style="display: flex; width: 100%; font-size: 15px;">
                            <div
                                style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                                平台选择:
                            </div>
                            <div class="btn-group">
                                <input type="radio" id="platform_option1" name="platform_options" class="btn-check"
                                    autocomplete="off" value="Tweet">
                                <label class="btn btn-outline-secondary" for="platform_option1">Tweet</label>

                                <input type="radio" id="platform_option2" name="platform_options" class="btn-check"
                                    autocomplete="off" value="Sina">
                                <label class="btn btn-outline-secondary" for="platform_option2">Sina</label>
                            </div>
                        </div>
                        <!--模型选择-->
                        <div style="display: flex; width: 100%; font-size: 15px;">
                            <div
                                style="white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                                模型选择:
                            </div>
                            <div class="btn-group">
                                <input type="radio" id="model_option1" name="model_options" class="btn-check"
                                    autocomplete="off" value="gpt-3.5">
                                <label class="btn btn-outline-secondary" for="model_option1">Chatgpt</label>

                                <input type="radio" id="model_option2" name="model_options" class="btn-check"
                                    autocomplete="off" value="chatglm-130b">
                                <label class="btn btn-outline-secondary" for="model_option2">Chatglm</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!--操作选项-->
                <div id="operation_btns"
                    style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                    <div class="btn operation_btn" id="analyse-button" value="analyse" onclick="analysebox()">
                        <div>分析</div>
                    </div>
                    <div class="btn operation_btn" id="flush-button-left" value="flush"
                        onclick="handleOperation_left('flush')">
                        <div>刷新</div>
                    </div>
                    <!-- <div class="btn operation_btn" id="copy-button-left" value="copy"
                        onclick="handleOperation_left('copy')">
                        <div>备份</div>
                    </div> -->
                </div>

                <!--term-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        term:
                    </div>
                    <button id="term" type="text" class="form-control" style="flex: 1">
                </div>

                <!--Category-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        category:
                    </div>
                    <button id="category" type="text" class="form-control" style="flex: 1">
                </div>

                <!--apect-->
                <div style="display: flex; width: 92%; font-size: 15px; margin: 10px auto 10px auto">
                    <div
                        style="width: 10%; white-space: nowrap; text-align: right; margin: auto 20px auto 0; user-select: none">
                        aspect:
                    </div>
                    <textarea id="aspect" type="text" class="form-control" style="flex: 1"></textarea>
                </div>
            </form>
        </div>

        <div id="right_block" style="display: flex; flex-direction: column; justify-content: space-evenly;width: 48%; height: 98%;
                border: solid 1px #a2a2a2; border-radius: 8px">
            <!--标题栏-->
            <div id="right_title"
                style="display: flex; align-items: center; background-color: #f3f3f3;width: 100%; border-radius: 8px 8px 0 0">
                <div style="margin: 10px 5px 10px 10px">文本回复</div>
                <!-- <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="identitySet">
                    <label class="form-check-label" for="identitySet" id="identitySet_label">启用身份集</label>
                </div> -->
            </div>
            <!--表单-->
            <form id="form2" method="POST" action="http://139.180.201.79:5000/submit"
                style="width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center">
                <!--身份-->
                <div id="identity_options"
                    style="display: flex; flex-direction: column; justify-content: space-between; height: 10%;width: 95%;margin: 20px auto 0 auto;">
                    <div style="display: flex; ">
                        <div style="text-align: right; width: 20%">
                            身份选择:
                        </div>
                        <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                            <div type="button" class="radioOption identity_opts selected" id="Political commentator"
                                onclick="identitySelection('Political commentator')">
                                <i style="border: solid 2px #71a5d4" class="bi bi-question"></i>
                                Political commentator
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Rapper"
                                onclick="identitySelection('Rapper')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Rapper
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Fallacy Finder"
                                onclick="identitySelection('Fallacy Finder')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Fallacy Finder
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Drunk Person"
                                onclick="identitySelection('Drunk Person')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Drunk Person
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; ">
                        <div style="width: 20%"></div>
                        <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                            <div type="button" class="radioOption identity_opts" id="Internet influencer"
                                onclick="identitySelection('Internet influencer')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Internet influencer
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Sports journalist"
                                onclick="identitySelection('Sports journalist')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Sports journalist
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Investigative journalist"
                                onclick="identitySelection('Investigative journalist')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Investigative journalist
                            </div>
                            <div type="button" class="radioOption identity_opts" id="Philosopher"
                                onclick="identitySelection('Philosopher')">
                                <i style="border: solid 2px #e8e8e8" class="bi bi-question"></i>
                                Philosopher
                            </div>
                        </div>
                    </div>
                </div>
                <!--态度-->
                <div id="attitude_options"
                    style="display: flex; flex-direction: column; justify-content: space-between; height: 10%;width: 95%;margin: 20px auto 0 auto;">
                    <div style="display: flex; ">
                        <div style="text-align: right; width: 20%">
                            态度选择:
                        </div>
                        <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                            <div type="button" class="radioOption attitude_opts selected selected" id="Formal"
                                onclick="attitudeSelection('Formal')"
                                style="color: #6297c2; border-color: #c2d1d6; background-color: #edf6fd">
                                Formal
                            </div>
                            <div type="button" class="radioOption attitude_opts" id="Humorous"
                                onclick="attitudeSelection('Humorous')">
                                Humorous
                            </div>
                            <div type="button" class="radioOption attitude_opts" id="Enthusiastic"
                                onclick="attitudeSelection('Enthusiastic')">
                                Enthusiastic
                            </div>
                        </div>
                    </div>
                    <div style="display: flex; ">
                        <div style="width: 20%"></div>
                        <div style="flex: 1; display:flex; max-width: 80%; justify-content: space-evenly">
                            <div type="button" class="radioOption attitude_opts" id="Intense"
                                onclick="attitudeSelection('Intense')">
                                Intense
                            </div>
                            <div type="button" class="radioOption attitude_opts" id="Serene"
                                onclick="attitudeSelection('Serene')">
                                Serene
                            </div>
                            <div type="button" class="radioOption attitude_opts" id="attitude_option6"
                                onclick="attitudeSelection('Sarcastic')">
                                Sarcastic
                            </div>
                        </div>
                    </div>
                </div>
                <!--长度选择-->
                <div style="display: flex; width: 95%; font-size: 15px; margin: 20px auto 0 auto">
                    <div
                        style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                        长度选择:
                    </div>
                    <div id="length_options"
                        style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                        <div class="radioOption len_class selected" id=">30" onclick="lengthSelection('>30')"
                            style="width: 45%; color: #6297c2; border-color: #c2d1d6; background-color: #edf6fd">>30
                        </div>
                        <div class="radioOption len_class" id="<=30" onclick="lengthSelection('<=30')"
                            style="width: 45%">
                            <=30 </div>
                        </div>
                    </div>
                    <!--argument-->
                    <div style="display: flex; width: 95%; font-size: 15px; margin: 20px auto 0 auto">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            采用领域知识:
                        </div>
                        <div id="adopt_options"
                            style="display:flex;justify-content: space-evenly;flex: 1;max-width: 80%;text-align: center">
                            <div class="radioOption adopt_class selected" id="Yes" onclick="adoptSelection('Yes')"
                                style="width: 45%; color: #efd8a3; border-color: #f0e8cb; background-color: #fef8ec">Yes
                            </div>
                            <div class="radioOption adopt_class" id="No" onclick="adoptSelection('No')"
                                style="width: 45%">No
                            </div>
                        </div>
                    </div>
                    <!--角色设定-->
                    <div style="display: flex; width: 95%; font-size: 15px;margin: 20px auto">
                        <div
                            style="width: 20%; white-space: nowrap; text-align: right;  margin: auto 20px auto 0; user-select: none">
                            角色选择:
                        </div>
                        <select id="character-setting" class="form-select" aria-label="Default select example"
                            style="flex: 1">
                            <option selected></option>
                            <option value="Sharp columnist">Sharp columnist</option>
                            <option value="Sarcastic Comedian">Sarcastic Comediann</option>
                            <option value="Empathetic Psychological counselors">Empathetic Psychological counselors
                            </option>
                            <option value="Calm Sociologist">Calm Sociologist</option>
                            <option value="Angry Victim">Angry Victim</option>
                            <option value="Peace-loving Female College Student">Peace-loving Female College Student
                            </option>
                            <option value="Tony Stark">Tony Stark</option>
                            <option value="Sheldon Cooper">Sheldon Cooper</option>
                            <option value="Sherlock Holmes">Sherlock Holmes</option>
                            <option value="Miranda Priestly">Miranda Priestly</option>
                            <option value="Deadpool">Deadpool</option>
                            <option value="Jay Gatsby">Jay Gatsby</option>
                            <option value="Daenerys Targaryen">Daenerys Targaryen</option>
                        </select>
                    </div>
                    <!--操作选项-->
                    <div id="operation_btns"
                        style="width: 92%; display: flex;justify-content: space-between;align-items: center;user-select:None; margin: auto">
                        <div class="btn operation_btn" id="submit-button" value="submit" onclick="submitbox()">
                            <div>提交</div>
                        </div>
                        <div class="btn operation_btn" id="flush-button-right" value="flush"
                            onclick="handleOperation_right('flush')">
                            <div>刷新</div>
                        </div>
                        <!-- <div class="btn operation_btn" id="copy-button-right" value="copy"
                            onclick="handleOperation_right('copy')">
                            <div>备份</div>
                        </div> -->
                    </div>
                    <!--回复框？-->
                    <textarea id="result-text" style="width: 95%; flex: 1; margin: 10px auto 10px auto;"
                        class="form-control"></textarea>
            </form>
        </div>
    </div>

    <script>
        // var aspectText = '';
        function submitbox() {
            console.log('111');
            // 获取提交按钮和结果文本框的 DOM 元素
            var submitButton = document.getElementById('submit-button');
            var resultText = document.getElementById('result-text');

            // 获取用户输入的值
            var tweetText = document.getElementById('tweet').value;
            var commentText = document.getElementById('comment').value;
            var platformSelect = document.querySelector('input[name="platform_options"]:checked').value;
            var attitudeSelect = document.querySelector('.attitude_opts.selected').getAttribute('id');
            var identitySelect = document.querySelector('.identity_opts.selected').getAttribute('id');
            var countrySelect = document.getElementById('country-select').value;
            var aspectSelect = document.getElementById('aspect').value;
            var lengthSelect = document.querySelector('.len_class.selected').getAttribute('id');
            var characterOption = document.getElementById('character-setting');
            if (characterOption) {
                characterSelect = characterOption.value;
            }
            else {
                characterSelect = '';
            }
            var modelSelect = document.querySelector('input[name="model_options"]:checked').value;
            var argumentSelect = document.querySelector('.adopt_class.selected').getAttribute('id');
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 请求成功，将返回的结果写入结果文本框
                    resultText.value = xhr.responseText;
                }
            };

            // 发送 POST 请求
            xhr.open('POST', 'http://139.180.201.79:5000//submit'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

            xhr.send(JSON.stringify({
                tweetText: tweetText,
                commentText: commentText,
                countrySelect: countrySelect,
                platformSelect: platformSelect,
                aspectSelect: aspectSelect,
                characterSelect: characterSelect,
                attitudeSelect: attitudeSelect,
                lengthSelect: lengthSelect,
                identitySelect: identitySelect,
                modelSelect: modelSelect,
                argumentSelect: argumentSelect,
            }));
        }
        function analysebox() {
            // 获取分析按钮和结果文本框的 DOM 元素
            var analyseButton = document.getElementById('analyse-button');
            var aspectText = document.getElementById('aspect');

            // 获取用户输入的值
            var tweetText = document.getElementById('tweet').value;
            var commentText = document.getElementById('comment').value;
            var countrySelect = document.getElementById('country-select').value;
            var platformSelect = document.querySelector('input[name="platform_options"]:checked').value;
            var modelSelect = document.querySelector('input[name="model_options"]:checked').value;
            // console.log(tweetText,commentText,countrySelect,platformSelect,modelSelect)
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 将返回的字符串解析成 JSON 对象
                    var responseJson = JSON.parse(xhr.responseText);
                    console.log(responseJson)
                    // 获取各个属性的值
                    var aspectTermPositiveList = responseJson.aspect_term_positive;
                    var aspectCategoryPositiveList = responseJson.aspect_category_positive;
                    var aspectTermNegativeList = responseJson.aspect_term_negative;
                    var aspectCategoryNegativeList = responseJson.aspect_category_negative;
                    // 将值添加到按钮上
                    console.log(aspectCategoryNegativeList);
                    var aspectTermBtn = document.getElementById('term');
                    var aspectCategoryBtn = document.getElementById('category');

                    for (let i = 0; i < aspectTermPositiveList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectTermPositiveList[i]}Btn`;
                        btnEl.className = 'term-btn';
                        btnEl.innerHTML = aspectTermPositiveList[i];

                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#e8f5ee';
                        btnEl.style.color = '#3dbc7d';
                        btnEl.style.border = 'solid 1px #3dbc7d';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(207, 239, 219)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#e8f5ee';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(148, 215, 169)';
                        });
                        // 点击按钮之后消失
                        btnEl.onclick = function () {
                            // event.stopPropagation();
                            event.preventDefault();
                            console.log("点击positive-term");
                            var aspectString = 'positive term:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectTermBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectTermNegativeList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectTermNegativeList[i]}Btn`;
                        btnEl.className = 'term-btn';
                        btnEl.innerHTML = aspectTermNegativeList[i];
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#fff4f2';
                        btnEl.style.color = '#ebb7b7';
                        btnEl.style.border = 'solid 1px #ebb7b7';

                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(255, 226, 226)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#fff4f2';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(227, 159, 159)';
                        });

                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'negative term:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectTermBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectCategoryPositiveList.length; i++) {
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectCategoryPositiveList[i]}Btn`;
                        btnEl.className = 'category-btn';
                        btnEl.innerHTML = aspectCategoryPositiveList[i];

                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#e8f5ee';
                        btnEl.style.color = '#3dbc7d';
                        btnEl.style.border = 'solid 1px #3dbc7d';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(207, 239, 219)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#e8f5ee';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(148, 215, 169)';
                        });

                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'positive category:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectCategoryBtn.appendChild(btnEl);
                    }
                    for (let i = 0; i < aspectCategoryNegativeList.length; i++) {
                        console.log(233);
                        const btnEl = document.createElement('button');
                        btnEl.id = `${aspectCategoryNegativeList[i]}Btn`;
                        btnEl.className = 'category-btn';
                        btnEl.innerHTML = aspectCategoryNegativeList[i];
                        // 设置按钮样式
                        btnEl.style.backgroundColor = '#fff4f2';
                        btnEl.style.color = '#ebb7b7';
                        btnEl.style.border = 'solid 1px #ebb7b7';
                        btnEl.style.marginRight = "5px";
                        btnEl.style.borderRadius = "5px";
                        // 鼠标悬停样式
                        btnEl.addEventListener('mouseenter', function () {
                            btnEl.style.backgroundColor = 'rgb(255, 226, 226)';
                            btnEl.style.cursor = 'pointer';
                        });

                        // 鼠标离开样式
                        btnEl.addEventListener('mouseleave', function () {
                            btnEl.style.backgroundColor = '#fff4f2';
                            btnEl.style.cursor = 'default';
                        });

                        // 鼠标按下样式
                        btnEl.addEventListener('mousedown', function () {
                            btnEl.style.backgroundColor = 'rgb(227, 159, 159)';
                        });
                        btnEl.onclick = function () {
                            event.preventDefault();
                            var aspectString = 'negative category:' + btnEl.innerHTML + '; ';
                            aspectText.value += aspectString;
                            btnEl.style.display = "none";
                        }
                        aspectCategoryBtn.appendChild(btnEl);
                    }
                }
            };
            // 发送 POST 请求
            xhr.open('POST', 'http://139.180.201.79:5000//analyse'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.send(JSON.stringify({
                tweetText: tweetText,
                commentText: commentText,
                countrySelect: countrySelect,
                platformSelect: platformSelect,
                modelSelect: modelSelect,
            }));
        }
        function handleOperation_left(operation) {
            console.log("left" + operation)
            if (operation == "flush") {
                var form = document.getElementById("form1");

                // 循环遍历表单中的所有元素
                for (var i = 0; i < form.elements.length; i++) {
                    var element = form.elements[i];

                    // 检查元素类型，并设置默认值
                    switch (element.type) {
                        case "text":
                        case "textarea":
                        case "select-one":
                            element.value = element.defaultValue;
                            break;
                        case "checkbox":
                        case "radio":
                            element.checked = element.defaultChecked;
                            break;
                    }
                }
            }
        }

        function handleOperation_right(operation) {
            console.log("right" + operation)
            if (operation == "flush") {
                var form = document.getElementById("form2");
                // 获取表单元素
                var form = document.getElementById("form2");

                // 刷新身份选择选项
                let identityOptions = document.querySelectorAll('.identity_opts');
                identityOptions.forEach(option => {
                    option.querySelector('i').style.borderColor = '#e6e6e6';
                    option.classList.remove('selected');
                });
                identityOptions[0].querySelector('i').style.borderColor = '#71a5d4';
                identityOptions[0].classList.add('selected');

                // 刷新态度选择选项
                let attitudeOptions = document.querySelectorAll('.attitude_opts');
                attitudeOptions.forEach(option => {
                    option.style.borderColor = '#c3c3c3';
                    option.style.backgroundColor = '';
                    option.style.color = '#c3c3c3';
                    option.classList.remove('selected');
                });
                attitudeOptions[0].style.borderColor = '#c2d1d6';
                attitudeOptions[0].style.backgroundColor = '#edf6fd';
                attitudeOptions[0].style.color = '#6297c2';
                attitudeOptions[0].classList.add('selected');

                // 刷新长度选择选项
                let lengthOptions = document.querySelectorAll('.len_class');
                lengthOptions.forEach(option => {
                    option.style.borderColor = '#c3c3c3';
                    option.style.backgroundColor = '';
                    option.style.color = '#c3c3c3';
                    option.classList.remove('selected');
                });
                lengthOptions[0].style.borderColor = '#c2d1d6';
                lengthOptions[0].style.backgroundColor = '#edf6fd';
                lengthOptions[0].style.color = '#6297c2';
                lengthOptions[0].classList.add('selected');

                // 刷新采用选择选项
                let adoptOptions = document.querySelectorAll('.adopt_class');
                adoptOptions.forEach(option => {
                    option.style.borderColor = '#c3c3c3';
                    option.style.backgroundColor = '';
                    option.style.color = '#c3c3c3';
                    option.classList.remove('selected');
                });
                adoptOptions[0].style.borderColor = '#f0e8cb';
                adoptOptions[0].style.backgroundColor = '#fef8ec';
                adoptOptions[0].style.color = '#efd8a3';
                adoptOptions[0].classList.add('selected');


                // 重置角色选择
                var roleSelect = form.querySelector("#character-setting");
                roleSelect.selectedIndex = 0;

                // 清空回复框
                var resultText = form.querySelector("#result-text");
                resultText.value = "";

            }
        }

        function identitySelection(optionId) {
            console.log(optionId)
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.identity_opts.selected');
            console.log(previousOption)
            console.log(previousOption.children)
            previousOption.querySelector('i').style.borderColor = '#e6e6e6'
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.querySelector('i').style.borderColor = '#71a5d4'
        }

        function attitudeSelection(optionId) {
            console.log(optionId)
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.attitude_opts.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            console.log(previousOption)
            console.log(previousOption.children)
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#c2d1d6'
            selectedOption.style.backgroundColor = '#edf6fd'
            selectedOption.style.color = '#6297c2'
        }

        function lengthSelection(optionId) {
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.len_class.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#c2d1d6'
            selectedOption.style.backgroundColor = '#edf6fd'
            selectedOption.style.color = '#6297c2'
        }

        function adoptSelection(optionId) {
            // 移除先前选中的选项样式
            let previousOption = document.querySelector('.adopt_class.selected');
            if (previousOption) {
                previousOption.classList.remove('selected');
            }

            // 添加选中的选项样式
            previousOption.style.borderColor = '#c3c3c3'
            previousOption.style.backgroundColor = ''
            previousOption.style.color = '#c3c3c3'

            // 添加选中的选项样式
            let selectedOption = document.getElementById(optionId);
            selectedOption.classList.add('selected');

            // 可以在这里执行其他操作，例如更新相关元素的内容或执行其他自定义逻辑
            selectedOption.style.borderColor = '#f0e8cb'
            selectedOption.style.backgroundColor = '#fef8ec'
            selectedOption.style.color = '#efd8a3'
        }
        function query_tweet(){
            var query = document.getElementById('query-text');
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 请求成功，将返回的结果设置成选择的格式
                    var resultQuery = xhr.responseText["result"];
                    selectElement = document.createElement('select')
                    resultQuery.forEach(result => {
                        const optionElement = document.createElement('option');
                        optionElement.value = result;
                        optionElement.textContent = result;
                        selectElement.appendChild(optionElement);
                    });
                }
            };

            // 发送 POST 请求
            xhr.open('POST', '/query_tweet'); // 将路径替换成您的后台处理请求的路径
            xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            xhr.send(JSON.stringify({
                tweetKey: query,
            }));

        }
        document.addEventListener('DOMContentLoaded', function () {

            let switchElement = document.getElementById('identitySet');
            let switchLabelElement = document.getElementById('identitySet_label');

            // 监听开关状态改变
            switchElement.addEventListener('change', function () {
                // 获取开关状态
                let isChecked = switchElement.checked;

                console.log(isChecked)

                // 根据开关状态更新文本内容
                if (isChecked) {
                    console.log(isChecked)
                    switchLabelElement.textContent = '启用身份集';
                } else {
                    console.log(isChecked)
                    switchLabelElement.textContent = '禁用身份集';
                }
            });
        });
    </script>

</body>

</html>